<template>
	<view class="container">
		
		<tui-tabs :tabs="tabs" :isFixed="scrollTop>=0" style="top:0" :currentTab="currentTab" selectedColor="#E41F19" sliderBgColor="#E41F19"
		 @change="changeTab"></tui-tabs>
		<!--选项卡逻辑自己实现即可，此处未做处理-->
		<view :class="{'tui-order-list':scrollTop>=0}">
		
			<tui-tips v-if="noData" imgUrl="/static/images/toast/img_nodata.png">暂无数据</tui-tips>
			
			<!--订单列表-->
			<view v-for="(item,index) in orderList" :key="index" class="tui-order-item" @tap.stop="goOrderView(item.id, item.goods_id)">
				<tui-list-cell :hover="false" :lineLeft="0">
					<view class="tui-goods-title">
						<view>{{item.shop_name}}</view>
						<view class="tui-order-status">{{item.add_time}}</view>
					</view>
				</tui-list-cell>
				<block>
					<tui-list-cell padding="0">
						<view class="tui-goods-item">
							<image :src="item.goods_logo" class="tui-goods-img"></image>
							<view class="tui-goods-center">
								<view class="tui-goods-name">{{item.goods_name}}</view>
								<view class="tui-goods-attr">{{item.remark}}</view>
							</view>
							<view v-if="item.goods_id > 0" class="tui-price-right">
								<view>￥{{item.goods_money}}</view>
								<view>x{{item.goods_num}}</view>
							</view>
						</view>
					</tui-list-cell>
				</block>
				<tui-list-cell :hover="false" :last="true">
					<view class="tui-goods-price">
						<view v-if="item.goods_id > 0" class="tui-goods-price-tit">共{{item.goods_num}}件商品 </view>
						<view v-if="item.jia_mi_total > 0" class="tui-goods-price-tit"> 使用{{item.jia_mi_total}}佳米抵扣 </view>
						<view v-if="item.goods_id > 0" class="tui-goods-price-tit">合计</view>
						<view  v-if="item.goods_id == 0" class="tui-goods-price-tit">到店消费 合计：</view>
						<view v-if="item.pay_type == 9" class="tui-size-24">$</view>
						<view v-if="item.pay_type == 9" class="tui-price-large">{{item.money_gold}}</view>
						<view v-if="item.pay_type != 9" class="tui-size-24">￥</view>
						<view v-if="item.pay_type != 9" class="tui-price-large">{{item.money_total}}</view>
					</view>
				</tui-list-cell>
				<view class="tui-order-btn">
					<view class="tui-btn-ml">
						<tui-button type="black" :plain="true" width="148rpx" height="56rpx" :size="26" shape="circle">{{item.pay_type_name}}</tui-button>
					</view>
					<view class="tui-btn-ml">
						<tui-button v-if="item.status != 4" type="danger" :plain="true" width="148rpx" height="56rpx" :size="26" shape="circle">{{item.status_name}}</tui-button>
					</view>
					<view class="tui-btn-ml" v-if="item.free_status_name != ''">
						<tui-button v-if="item.free_status_name == '已红包'" type="green" width="148rpx" height="56rpx" :size="26" shape="circle">{{item.free_status_name}}</tui-button>
						<tui-button v-else type="green" :plain="true" width="148rpx" height="56rpx" :size="26" shape="circle">{{item.free_status_name}}</tui-button>
					</view>
				</view>
			</view>

		</view>
		
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn" bgcolor="#f7f7f7"></tui-nomore>
		<!--加载loadding-->

		<footer-menu :tabCur="2"></footer-menu>

	</view>
</template>

<script>
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import tuiLoadmore from "@/components/thorui/tui-loadmore/tui-loadmore"
	import tuiNomore from "@/components/thorui/tui-nomore/tui-nomore"
	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell"
	import tuiSticky from "@/components/thorui/tui-sticky/tui-sticky"
	import tuiTips from "@/components/thorui/tui-tips/tui-tips"
	export default {
		components: {
			tuiTabs,
			tuiButton,
			tuiLoadmore,
			tuiNomore,
			tuiListCell,
			tuiSticky,
			tuiTips,
			footerMenu,
			tuiIcon,
		},
		data() {
			return {
				tabs: [{name:"全部"},{name:"待使用"},{name:"已完成"}],
				currentTab: 0,
				pageIndex: 1,
				pageCount: 0,
				pageTotal: 0,
				orderList: [],
				
				noData: false,		//暂无数据
				loadding: false,
				pullUpOn: true,
				scrollTop: 0,
				
			}
		},
		methods: {
			
			changeTab(e) {
				let tabIndex = e.index;
				let orderUrl = '';
				if(tabIndex == 1) {	//待使用
					orderUrl = '/pages/my-order/yet';
				}else if(tabIndex == 2){
					orderUrl = '/pages/my-order/done';
				}else{
					orderUrl = '/pages/my-order/index';
				}
				uni.navigateTo({
					url: orderUrl
				})
			},
			
			//得到订单的详情
			goOrderView: function(orderId, goodsId) {
				if(goodsId == 0) {
					this.tui.toast('该订单是在线支付商品', 2000, false);
					return ;
				}else{
					uni.navigateTo({
						url: '/pages/my-order/view?id='+ orderId
					})
				}
			},
			
			//得到订单列表
			getOrderList: function(type) {
				if(type != 'append') this.pageIndex = 1;
				uni.request({
					url: this.$apiUrl + '/api/order/list',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
					data: {
						page_num: this.pageIndex,
						status: 0,
					},
					success: (res) => {
						let resData = res.data['data'];
						if(type == 'append') {		//底部分页加载更多
							this.orderList = this.orderList.concat(resData['list']);
						}else{
							this.orderList = resData['list'];
							if(resData['list'].length == 0){
								this.noData = true;
							}
						}
						this.pageCount = resData['pager']['page_total'];
					//	this.pageTotal = resData['pager']['count'];
					}
				});
			},
			
			
			//得到我的个人信息
			getMyBaseInfo: function(){
				uni.request({
					url: this.$apiUrl + '/api/user/baseInfo',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
					success: (res) => {
						let resErr = res.data['error'];
						let resCode = res.data['code'];
						if(resCode == 401) {		//用户未登录
							uni.navigateTo({ url: '/pages/my/login' });
						}else{
							this.tui.toast(resMsg, 2000, false);
						}
					}
				});
			},
			
		},
		
		
		//页面加载的时候
		onLoad: function(options) {
			this.getOrderList();
		},
		
		//每次页面显示的时候都会去重新获取一下
		onShow() {
			this.getMyBaseInfo();
		},
		
		
		//上拉刷新页面
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200);
		},
		
		//下拉加载更多
		onReachBottom() {
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == this.pageCount) {
				this.loadding = false;
				this.pullUpOn = false
			} else {
				this.pageIndex = this.pageIndex + 1;
				this.getOrderList('append');
				this.loadding = true;
				this.pullUpOn = true;
			}
		},
		
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style>
	
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-order-list {
		margin-top: 80rpx;
	}

	.tui-order-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-order-status {
		color: #888;
		font-size: 26rpx;
	}

	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
		border-radius: 6rpx;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-color-red {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-goods-price {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 24rpx;
		line-height: 40rpx;
		align-content: center;
	}


	.tui-size-24 {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-price-large {
		font-size: 32rpx;
		line-height: 30rpx;
		font-weight: 500;
	}

	.tui-order-btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background: #fff;
		padding: 10rpx 30rpx 20rpx;
		box-sizing: border-box;
	}

	.tui-btn-ml {
		margin-left: 20rpx;
	}
	
	.tui-goods-price-tit{
		margin:0 20rpx;
	}
	
</style>